<script setup lang="ts">
// 最佳匹配
import MusicItem from "@/components/MusicItem/index.vue";
import { onMounted, ref } from "vue-demi";
import { getPlaylistAndSing, getCloudSearch } from "@/api/content";

const props = defineProps(["keyword"]);

const artist = ref<any[]>([]);
const playlist = ref<any[]>([]);
const songs = ref<any[]>([]);

onMounted(async () => {
  const res = await getPlaylistAndSing(props.keyword);
  artist.value = res.result.artist || [];
  playlist.value = res.result.playlist || [];
  const res1 = await getCloudSearch({
    keywords: props.keyword,
  });
  songs.value = res1.result.songs;
});
</script>

<template>
  <div class="m-search-default">
    <section class="m-matchlist">
      <h3 class="title">最佳匹配</h3>
      <ul>
        <li
          class="matchitem artlist"
          v-for="(item, index) in artist"
          :key="'artist' + index"
        >
          <router-link :to="{ name: 'artist', params: { id: item.id } }">
            <div class="u-content">
              <div class="cover-img">
                <img :src="item.img1v1Url" alt="" />
              </div>
              <div class="u-desc">
                <h4 class="mains">
                  歌手: {{ item.name }}
                  {{ item.alias.length > 0 ? `(${item.alias.join("/")})` : "" }}
                  {{ item.transNames ? `(${item.transNames.join("/")})` : "" }}
                </h4>
              </div>
              <SvgIcon icon="right" className="right-icon"></SvgIcon>
            </div>
          </router-link>
        </li>
        <li
          class="matchitem playlist"
          v-for="(item, index) in playlist"
          :key="'playlist' + index"
        >
          <router-link :to="{ name: 'playlist', params: { id: item.id } }">
            <div class="u-content">
              <div class="cover-img">
                <img :src="item.coverImgUrl" alt="" />
              </div>
              <div class="u-desc">
                <h4 class="mains">歌单: {{ item.name }}</h4>
                <p class="byauth">by {{ item.creator?.nickname }}</p>
              </div>
              <SvgIcon icon="right" className="right-icon"></SvgIcon>
            </div>
          </router-link>
        </li>
      </ul>
    </section>
    <section>
      <MusicItem :list="songs"></MusicItem>
    </section>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/styles/_mixin.scss";
.m-matchlist {
  padding: 16px 0 8px;
  .title {
    margin-left: 20px;
    font-size: 24px;
    line-height: 32px;
    color: #666;
  }
}
.matchitem {
  position: relative;
  height: 132px;

  .u-content {
    display: flex;
    align-items: center;
    height: 132px;
    margin-left: 20px;
    padding: 16px 20px 16px 0;

    .cover-img {
      position: relative;
      width: 100px;
      height: 100px;
      margin-right: 30px;
    }

    .u-desc {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .mains {
        font-size: 34px;
        line-height: 60px;
        @include in1line;
      }

      .byauth {
        font-size: 24px;
        line-height: 30px;
        color: #999;
      }
    }

    .right-icon {
      width: 16px;
      height: 28px;
      margin: 0 16px;
      color: #999;
    }
  }
}
</style>
